<template>
<div class="page">
  <div class="cont flex_a_c">
    <div class="title_txt">手机号</div>
    <input class="flex1" v-model="form.user_name" type="text" placeholder="请输入手机号">
  </div>
  <div class="cont flex_a_c">
    <div class="title_txt">密码</div>
    <input class="flex1" v-model="form.pass_word" type="password" placeholder="请输入密码">
  </div>
  <div v-if="isShowReg" class="cont flex_a_c">
    <div class="title_txt">确认密码</div>
    <input class="flex1" v-model="form.againPwd" type="password" placeholder="请再次输入密码">
  </div>
  <p v-if="!isShowReg" class="tip">还没有账号？<span @click="isShowReg = !isShowReg">去注册</span></p>
  <p v-else class="tip">已有账号<span @click="isShowReg = !isShowReg">去登录</span></p>
  <div class="btns flex_center " @click="onSubmit">{{ isShowReg ? '注册' : '登录' }}</div>
</div>
</template>
<script setup>
import { reactive, ref, onBeforeUnmount } from 'vue'
import { showToast } from 'vant'
import { debounce } from '@/utils'
import { postRegister, login } from '@/api'
import { useStore } from '@/store/index';
import { storeToRefs } from "pinia";
import { useRouter } from 'vue-router'
let router = useRouter()
const store = useStore();
let isShowReg = ref(false)
let form = reactive({
  user_name: '',
  pass_word: '',
  againPwd: ''
})
let onSubmit = async () => {
  if (!form.user_name) {
    showToast('请输入手机号')
    return false
  }
  if (!form.pass_word) {
    showToast('请输入密码')
    return false
  }
  var reg1 = /^(?=.*\d)(?=.*[A-z])[0-9A-Za-z\x21-\x2f\x3a-\x40\x5b-\x60\x7B-\x7F]{8,16}$/;
  if (!reg1.test(form.pass_word)) {
    showToast('请输入格式为8-16位包含数字英文的密码')
    return true;
  }
  if (isShowReg.value && !form.againPwd) {
    showToast('请再次输入密码')
    return false
  }
  if (isShowReg.value && form.pass_word !== form.againPwd) {
    showToast('两次密码不一致')
    return false
  }
  let request = isShowReg.value ? postRegister : login
  const { code, data } = await request(form)
  if (code === 200) {
    store.setUserInfo(data)
    store.setAccessToken(data.token)
    router.replace('/')
  }
}
</script>
<style lang="scss" scoped>
.page {
  padding: 16px;
  min-height: 100vh;
  background: #161616;
  .cont {
    background: #0C0C0C;
    border-radius: 4px 4px 4px 4px;
    margin-top: 24px;
    padding-left: 16px;
    padding-right: 16px;
    padding-top: 18px;
    padding-bottom: 18px;
    font-size: 14px;
    position: relative;
    .title_txt {
      color: #FFFFFF;
      line-height: 20px;
    }
    input {
      text-align: right;
      color: #ADADAD;
    }
  }
  .btns {
    height: 56px;
    background: #F5D290;
    border-radius: 4px 4px 4px 4px;
    text-align: center;
    line-height: 56px;
    font-size: 16px;
    color: #000000;
    margin-top: 24px;
    .icon {
      margin-right: 8px;
      width: 20px;
      height: 20px;
    }
  }
  .tip {
    text-align: right;
    color: #ADADAD;
    font-size: 14px;
    line-height: 20px;
    padding: 20px 0 10px 0;
    span {
      color: #409EFF;
      text-decoration: underline;
    }
  }
}
</style>